<template>
  <FullPage class="">
    <VGrid
      ref="vgrid"
      :formConfig="formConfig"
      :tableConfig="tableConfig"
      :proxy="proxy"
      @handleFormBtnClick="handleFormBtnClick"
      @handleTableBtnClick="handleTableBtnClick"
    ></VGrid>
    <RoleFormDialog ref="roleFormDialog" @submit="getTableData"></RoleFormDialog>
    <RolePrivilegeDialog ref="rolePrivilegeDialog"></RolePrivilegeDialog>
  </FullPage>
</template>

<script>
import FullPage from '@/components/FullPage';
import VGrid from '@/components/VGrid';
import RoleFormDialog from './RoleFormDialog';
import RolePrivilegeDialog from './RolePrivilegeDialog';
import storage from 'js-storage';

export default {
  components: {
    FullPage,
    VGrid,
    RoleFormDialog,
    RolePrivilegeDialog,
  },
  data() {
    return {
      formConfig: {
        props: {
          inline: true,
        },
        btns: [
          // {
          //   key: 'submit',
          //   label: '搜索',
          // },
          // {
          //   key: 'reset',
          //   label: '重置',
          // },
          // {
          //   key: 'add',
          //   label: '添加发动机型号',
          //   type: 'primary',
          //   plain: true,
          //   icon: 'el-icon-plus',
          // },
        ],
        // fieldList: [
        //   {
        //     type: 'input',
        //     model: 'name',
        //     label: '',
        //     props: {
        //       placeholder: '请输入角色名',
        //     },
        //   },
        // ],
      },
      tableConfig: {
        props: {
          border: true,
          stripe: true,
        },
        columnList: [
          {
            prop: 'task_id',
            label: '生产订单号',
          },
          {
            prop: 'engine_num',
            label: '发动机型号',
          },
          {
            prop: 'product_num',
            label: '产品件号',
          },
          {
            prop: 'product_name',
            label: '产品名称',
          },
          {
            prop: 'standard_num',
            label: '基础装配工艺',
          },
          {
            prop: 'custome_standard_no',
            label: '定制工艺',
          },
          {
            prop: 'status',
            label: '状态',
            type: 'operation_view',
            filter: {
              1: '完成',
              0: '开始任务',
              default: '无',
            },
            colorFilter: {
              1: '#999',
              0: '#46a6ff',
              default: '#46a6ff',
            },
            btns: [
              {
                key: 'start',
                label: '开始任务',
              },
            ],
          },
          // {
          //   prop: 'status',
          //   label: '状态',
          // },
        ],
      },
      proxy: {
        list: {
          api: this.$api.ai_myTask.getList,
        },
        delete: {
          api: this.$api.ai_myTask.delete,
        },
      },
    };
  },

  methods: {
    handleFormBtnClick(key, params) {
      if (key === 'add') {
        this.$refs.roleFormDialog.show('add');
      }
    },
    handleTableBtnClick(key, row) {
      if (key === 'start') {
        storage.localStorage.set('stepIndex', 0); // 进入第一步
        // 第一个屏
        window.open(`${window.location.protocol}//${window.location.host}/#/video?taskId=${row.id}`, '_blank');

        // 第二个屏;
        var openInNextScreenEvent = new CustomEvent('Event', {
          detail: `${window.location.protocol}//${window.location.host}/#/task?taskId=${row.id}`,
        });
        openInNextScreenEvent.initEvent('openInNextScreenEvent', true, true);
        document.dispatchEvent(openInNextScreenEvent);

        // 第三个屏
        var openNextNextScreenEvent = new CustomEvent('Event', {
          detail: `${window.location.protocol}//${window.location.host}/#/control?taskId=${row.id}`,
        });
        openNextNextScreenEvent.initEvent('openNextNextScreenEvent', true, true);
        document.dispatchEvent(openNextNextScreenEvent);
        storage.localStorage.set('isClose', 0); // 监听全局关闭
      }
    },

    getTableData() {
      this.$refs.vgrid.getTableData();
    },

    refreshTableData() {
      this.$refs.vgrid.refreshTableData();
    },
  },
};
</script>

<style lang="scss" scoped></style>
